var str='',
    parWidth,
    style,
    timer=null,
    waitCountNum= 0,
    waitLoopTime=15;///1分钟重复一次动效

window.onresize = function() {
    getRem(100, 600);
};
window.onload = function() {
    getRem(100, 600);
    $.ajax({
        type: "get",
        url:"preview/json/rankData.json",
        dataType: "json",
        data: {},
        success: function (json) {
            str='';
            $.each(json,function(i,e){
                str+='<li class="animated">'+
                    '   <div class="bookTitle fl">'+
                    '       <div class="textSlide'+i+' textSlide titleText">'+ e.name+'</div>'+
//                            '       <div>'+ e.name+'</div>'+

                    '   </div>'+
                    '   <div class="bookDownNum fr">'+ e.downLoad+'</div>'+
                    '</li>';
            });
            $('ul').html(str);

            ////每条数据动效 绑定动画完成事件
            $('li').eq(0).addClass('fadeInDown').css({opacity:1}).siblings().removeClass('fadeInDown').css({opacity:0});
            $('li').each(function(i,e){
                $(e).on("webkitAnimationEnd",function(event){
                    event.stopPropagation();
                    $(e).next().addClass('fadeInDown').css({opacity:1}).siblings().removeClass('fadeInDown');
                    $(e).next().find('.titleText').addClass('textSlide'+(i+1)+'');
                })
            });
            $('.titleText').on("webkitAnimationEnd",function(event){
                event.stopPropagation();
            })
            waitTime();///每条数据动效
            textSlideInit();//文字滚动初始化



        }
    });

}
///每条数据动效函数
function waitTime(){
    if(!!window.timer)	cancelAnimationFrame(window.timer);
    if(waitCountNum >= (waitLoopTime*60)){
        waitCountNum = 0;
        $('li').eq(0).addClass('fadeInDown').css({opacity:1}).siblings().removeClass('fadeInDown').css({opacity:0});
        $('.titleText').each(function(i,e){
            if(i!==0){
                $(e).removeClass('textSlide'+i+'');
            }
        });
    }
    waitCountNum++;
    window.timer = requestAnimationFrame(waitTime);
}
///文字滚动函数
function textSlideInit(){
    setTimeout(function(){
        style=document.styleSheets[3];///获得样式
        parWidth=$('.bookTitle').eq(0).width();////获得盒子的宽度
        //console.log(parWidth);
        $('.titleText').each(function(i,e){
            ////阻止内层书名事件冒泡
            //$(e).on("webkitAnimationEnd",function(event){
            //    event.stopPropagation();
            //})
            var currWidth=$(e).width();///获得每个书名的宽度
            if(currWidth>parWidth){
                var currTime=Math.round(currWidth/10);
                style.deleteRule(i);//清除之前写入的动画样式
                style.insertRule("@keyframes textSlide"+i+" {0%{}30%{-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}100%{-webkit-transform: translate3d(-"+currWidth+"px,0,0); transform: translate3d(-"+currWidth+"px,0,0);}}",0);//写入样式
                $(e).css({
                    "animation-duration":currTime+'s',
                    "-webkit-animation-duration": currTime+'s'
                })

            }
        });

    },1000)
}





////做每条数据出现动效  可以先不用管
//function loopMove(){
//    clearTimeout(timer);
//    $('li').eq(0).addClass('fadeInDown').css({opacity:1}).siblings().removeClass('fadeInDown').css({opacity:0});
//    $('.titleText').each(function(i,e){
//        if(i!==0){
//            $(e).removeClass('textSlide'+i+'');
//        }
//    })
//    timer= setTimeout(loopMove,120000);///2分钟执行一次
//}
//loopMove();


/////////////////////////////////////////////////////////////
